<template>
  <a-card :bordered="false" style="width: 100%">
    <template #title>
      <div class="card-header">
        <img src="@/assets/images/card-title.png" alt="" class="title-img">
        <span>{{ title }}</span>
      </div>
    </template>
<!--    自定义内容插槽区域-->
    <slot></slot>
    <template #extra>
      <EllipsisOutlined />
    </template>
  </a-card>
</template>

<script setup>
import {EllipsisOutlined} from "@ant-design/icons-vue"
const props=defineProps({
  title:{
    type:String,
    default:"工作台"
  }
})
</script>

<style scoped lang="scss">
.card-header{
  display: flex;
  align-items: center;
  .title-img{
    width: 3px;
    height: 13px;
    margin-right: 10px;
  }
  span{
    font-size: 14px;
  }
}
</style>